<template>
    <div class="store-branding">

        <UxLoading :loading="loading" />

        <BrandingChangeBranding v-if="!loading" :hangtag="store.tag_design_info" :packaging='store.pack_design_info' @change='onChangeClick($event)' @disconnect="onDisconnectClick($event)" />

        <!-- 选择吊牌 -->
        <BrandingHangtagSelect v-if="hangtagSelect" v-model="hangtagSelect" @update="bindChange('tag', $event)" />
        <!-- 选择包装 -->
        <BrandingPackageSelect v-if="packagingSelect" v-model="packagingSelect" @update="bindChange('pack', $event)" />
        <!-- 绑定与解除绑定弹窗 -->
        <BrandingConnectStoreNotify v-if="binding" :option="binding" @close="binding.close($event)" @success="binding.success($event)" />
    </div>
</template>

<script>
export default {
    name: "StoreOperat",
    props: {
        store: { type: Object, default: {} },
        // hangtagList: { type: Array, default: () => [] },
        // packagingList: { type: Array, default: () => [] },
    },
    data () {
        return {
            loading: true,
            hangtagSelect: null,
            packagingSelect: null,
            binding: null,
        };
    },

    computed: {
        hangtag () {
            return this.store.tag_design_info
        },
        packaging () {
            return this.store.pack_design_info
        }
    },

    methods: {
        // 更换绑定
        onChangeClick (type) {
            if (type == 'tag') {
                this.hangtagSelect = this.hangtag || {};
            } else if (type == 'pack') {
                this.packagingSelect = this.packaging || {};
            }
        },

        // 绑定
        bindChange (type, brand) {
            this.binding = {
                store: this.store,
                brand: brand,
                type: type,
                close: () => {
                    this.binding = null;
                },
                success: (store) => {
                    const id = (brand || {}).id || 0;
                    if (type == 'tag') {
                        this.store.tag_design_id = id;
                    } else if (type == 'pack') {
                        this.store.pack_design_id = id;
                    }

                    this.binding = null;
                    this.$emit('update', this.store)
                    this.$nextTick(e => {
                        this.hangtagSelect = null;
                        this.packagingSelect = null;
                    })
                }
            }
        },

        // 取消绑定
        onDisconnectClick (type) {

            this.binding = {
                store: this.store,
                brand: null,
                type: type,
                close: () => {
                    this.binding = null;
                },
                success: (store) => {
                    if (type == 'tag') {
                        this.store.tag_design_id = 0;
                    } else if (type == 'pack') {
                        this.store.pack_design_id = 0;
                    }
                    this.binding = null;
                    this.$emit('update', this.store)

                },
            }

        },

        init () {
            this.loading = false;

        }

    },
    created () {
        this.init();
    },
};
</script>

<style lang="scss" scoped>
.store-branding {
    position: relative;
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid #e5e5e5;
    padding: 24px 18px;
    box-sizing: border-box;
    height: 214px;
    overflow: hidden;
}
.change-branding::v-deep {
    .change-branding-title {
        font-size: 14px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        color: #555555;
        line-height: 16px;
    }
    .change-branding-content {
        height: 136px;
        padding: 12px;
        margin-top: 16px;

        .thumb-preview {
            width: 112px;
            height: 112px;
            min-width: initial;

            figure {
                width: 100%;
                margin-left: 0;
                left: 0;
            }
        }

        .change-branding-info {
            flex: 1;
            width: auto;
            position: relative;
            padding-right: 132px;
            margin-left: 12px;
            justify-content: center;

            & > p {
                margin-top: 8px;
                &:nth-child(2) {
                    display: none;
                }

                strong {
                    display: none;
                }
            }

            fieldset {
                position: absolute;
                right: 0;
                top: 0;
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: center;
                button {
                    width: 120px;
                    height: 36px;
                }
            }
        }
    }

    .change-branding-empty {
        height: 136px;
        padding: 12px;
        margin-top: 16px;
        p {
            width: 80px;
            height: 80px;
            border: none;

            &::before,
            &::after {
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
            }
            &::before {
                width: 24px;
                height: 3px;
            }

            &::after {
                width: 3px;
                height: 24px;
            }
        }
    }
}
</style>
